import { useState } from 'react'
import place from '@/assets/pngs/03.place.png'
import { usePageTitle } from '@/hooks'
import { useRequest } from 'ahooks'
import {Tooltip ,Pagination  } from 'antd'
import { useNavigate } from 'react-router-dom'
import { pageArticle } from '@/service/article'
import { getLengthByCode } from '@/utils'
import Loading from '@/components/loading'
import Svg from '@/components/icon-svg'

import "./index.less"

type PageInfo = {
  current: number,
  pageSize: number,
  total:number
}

export default function Note() {

  usePageTitle('随笔')

  const [pageInfo, setPageInfo] = useState<PageInfo>({current:1 , pageSize:10 , total:0});

  const navigate = useNavigate();

  const { data:dataSource = [] ,runAsync: loadNote } = useRequest(async ({ current = 1, pageSize = 10} = {}) => {
    const { records = [], total = 0 } = await pageArticle({
      current,
      pageSize,
      article_type_id: 2
    }) || { }
    setPageInfo({ current, pageSize, total })
    return records
  })


  return (
    <div className="note">
      {
        Boolean(dataSource.length) && (
          <div className="outer-container">
            {
              dataSource.map(item => {
                const src = item.pic || place
                const [ isLimite , realLength ] = getLengthByCode(item.title , 20)
                return (
                  <div className="item-container" key={ item.id} onClick={()=>navigate(`/note_detail/${item.id}`)}>
                    <div className="item-content">
                      <div className="item-pic-note">
                        {/* <img src={ src} alt={item.pic} /> */}
                        { item.title.slice(0,1) }
                      </div>
                      {
                        isLimite
                          ? (
                            <Tooltip title={ item.title }>
                              <div className="item-title">{ item.title.slice(0,realLength) }...</div>
                            </Tooltip>
                          )
                          : <div className="item-title">{ item.title }</div>
                      }        
                      <div className="item-action">
                        <div>
                          <Svg name="03.readed.svg" width={14} height={18} className="svg"/>
                          <span>{item.read_num}</span>
                        </div>
                        <div>
                          <Svg name="04.thumbs-up.svg" width={14} height={18} className="svg"/>
                          <span>{item.like_num}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                )
              })
            }
          </div>
        )
      }
      
      {
        dataSource.length ? (
          <div className="pagination">
            <Pagination
              size="small"
              {...pageInfo}
              showQuickJumper
              onChange={(page, pageSize) => {
                loadNote({current:page , pageSize})
              }}
            />
          </div>
        ) : <Loading/>
      }
      
    </div>
  )
}